<template>
		<!-- 普通弹窗 -->
		<view  class="popup" v-if="show">
			
			<textarea class="comment-text" auto-height placeholder="说点什么吧" v-model="commentText"></textarea> 
	
			<!-- b表情  图片 提交按钮 -->
			<view class="emotion_submit">
				<view class="emotions" @click="toggleEmotions">
					<image src="/static/imgs/01.png" />
				</view>
				<button class="mini-btn" type="warn" size="mini" @click="submitComment">发送</button>
	
	
			</view>
			<view class="emotions-list" v-if="showEmotions">
				<image v-for="(emotion, index) in emotions" :key="index" :src="emotion.src"
					@click="addEmotion(emojiChar.split('-')[index])" />
			</view>
		</view>
		
</template>

<script>
	export default {
		name:"comment",
		props: {
		// 定义接收的对象属性
			objectProp: {
				type: Object,
				default: () => ({})
			},
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
				commentText: '',
				showEmotions: false,
				emotions: [{
						src: '/static/imgs/01.png'
					},
					{
						src: '/static/imgs/02.png'
					},
					{
						src: '/static/imgs/03.png'
					},
					{
						src: '/static/imgs/04.png'
					},
					{
						src: '/static/imgs/05.png'
					},
					{
						src: '/static/imgs/06.png'
					},
					{
						src: '/static/imgs/07.png'
					},
					{
						src: '/static/imgs/08.png'
					},
					{
						src: '/static/imgs/09.png'
					},
					{
						src: '/static/imgs/10.png'
					},
					{
						src: '/static/imgs/11.png'
					},
					{
						src: '/static/imgs/12.png'
					},
					{
						src: '/static/imgs/13.png'
					},
					{
						src: '/static/imgs/14.png'
					},
					{
						src: '/static/imgs/15.png'
					},
					{
						src: '/static/imgs/16.png'
					},
					{
						src: '/static/imgs/17.png'
					},
					{
						src: '/static/imgs/18.png'
					},
					{
						src: '/static/imgs/19.png'
					},
					{
						src: '/static/imgs/20.png'
					},
					{
						src: '/static/imgs/21.png'
					},
					{
						src: '/static/imgs/22.png'
					},
					{
						src: '/static/imgs/23.png'
					},
					{
						src: '/static/imgs/24.png'
					},
					{
						src: '/static/imgs/25.png'
					},
					{
						src: '/static/imgs/26.png'
					},
					{
						src: '/static/imgs/27.png'
					},
					{
						src: '/static/imgs/28.png'
					},
					{
						src: '/static/imgs/29.png'
					},
					{
						src: '/static/imgs/30.png'
					},
					{
						src: '/static/imgs/31.png'
					},
					{
						src: '/static/imgs/32.png'
					},
					{
						src: '/static/imgs/33.png'
					},
					{
						src: '/static/imgs/34.png'
					},
					{
						src: '/static/imgs/35.png'
					},
					{
						src: '/static/imgs/36.png'
					},
					{
						src: '/static/imgs/37.png'
					},
					{
						src: '/static/imgs/38.png'
					},
					{
						src: '/static/imgs/39.png'
					},
					{
						src: '/static/imgs/40.png'
					},
					{
						src: '/static/imgs/41.png'
					},
					{
						src: '/static/imgs/42.png'
					},
					{
						src: '/static/imgs/43.png'
					},
					{
						src: '/static/imgs/44.png'
					},
					{
						src: '/static/imgs/45.png'
					},
					{
						src: '/static/imgs/46.png'
					},
					{
						src: '/static/imgs/47.png'
					},
					{
						src: '/static/imgs/48.png'
					},
					{
						src: '/static/imgs/49.png'
					},
					{
						src: '/static/imgs/50.png'
					},
					{
						src: '/static/imgs/51.png'
					},
					{
						src: '/static/imgs/52.png'
					},
					{
						src: '/static/imgs/53.png'
					},
					{
						src: '/static/imgs/54.png'
					},
					{
						src: '/static/imgs/55.png'
					},
					// ... 其他表情
				],
				emojiChar: "☺-😋-😌-😍-😏-😜-😝-😞-😔-😪-😭-😁-😂-😃-😅-😆-👿-😒-😓-😔-😏-😖-😘-😚-😒-😡-😢-😣-😤-😢-😨-😳-😵-😷-😸-😻-😼-😽-😾-😿-🙊-🙋-🙏-✈-🚇-🚃-🚌-🍄-🍅-🍆-🍇-🍈-🍉-🍑-🍒-🍓-🐔-🐶-🐷-👦-👧-👱-👩-👰-👨-👲-👳-💃-💄-💅-💆-💇-🌹-💑-💓-💘-🚲",
				
			};
		},
		methods:{
			
			toggleEmotions() {
				this.showEmotions = !this.showEmotions;
			},
			// 将文本中的表情代码替换为图片
			replaceEmojis(text) {
				return text;
			},
			addEmotion(emotionCode) {
				if (emotionCode == "") return;
				this.commentText += emotionCode
			},
			submitComment() {
				// 提交评论逻辑，将处理过的commentText发送到服务器
				console.log('提交评论:', this.commentText);
				// ... 发送评论逻辑
				this.submitCommentTo();
			},
			//将评论提交到后端
			async submitCommentTo() {
				await uni.request({
					url: uni.$http.baseUrl + '/api/hotspot/reviewHotspot',
					data: {
						id: this.objectProp.id,
						hotspotId: this.objectProp.hotspotId,
						userId: this.objectProp.userId,
						//被回复的人就是上个页面传过来的值
						replyUserId: this.objectProp.thisCommentUserId,
						reviewContent: this.commentText,
						
					},
					method: 'POST',
					header: {
						 "Content-Type": "application/json",
						//"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						this.info = res.data.data
						console.log(this.info)
						this.commentText=""
						//关闭弹出层
						this.$emit('close');
					},
					fail: (res) => {
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.popup {
		flex-direction: column;
		width: 100%;

		.comment-text {
			width: 95%;
			background-color: #fff;
			border: 1px solid #ccc;
			/* 边框颜色和宽度 */
			border-radius: 15px;
			/* 圆角的半径 */
			margin: 5px;
			padding: 5px;
			/* 内边距 */
			max-height: 300px;
			/* 设置最大高度 */
			overflow-y: auto;
			/* 超出最大高度时显示滚动条 */

		}

		.emotion_submit {
			display: flex;
			justify-content: flex-end;
			/* 这将子元素放到容器的右边 */
			.emotions {
				margin-left: 10px;
				image {
					width: 20px;
					height: 20px;
					cursor: pointer;
				}
			}
			.mini-btn {
				margin-bottom: 5px;
				margin-right: 10px;
				margin-left: auto;
				margin-top: auto;
			}
		}
	}
</style>